<template>
<div class="home">
  <div>hello vue of TS</div>
  <div>{{mes}}</div>
  <button @click="addNum">自增 {{num}}</button>
  <p>{{a}}</p>
  <p>{{a}}</p>
</div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onErrorCaptured,
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  reactive,
  toRefs,
  watch,
} from "vue";

export default defineComponent({
  name: "Home",

  // setup() {
  //   const mes = ref('测试数据')
  //   const num = ref(0)
  //   function addNum() {
  //     num.value++
  //   }
  //   return {
  //     mes,
  //     num,
  //     addNum
  //   }
  // }
  setup() {
    interface DataProps {
      num: number;
      mes: string;
      addNum: () => void;
    }

    const data: DataProps = reactive({
      num: 0,
      mes: "01212",
      a: "1",
      addNum: () => {
        data.num++;
        document.title = data.num + "";
      },
    });
    const refData = toRefs(data);

    watch(
      () => data.num,
      (newVal, oldVal) => {
        console.log({
          newVal: newVal,
        });
        console.log(oldVal);
      }
    );
    onBeforeMount(() => {
      console.log("beforeMount");
    });
    onMounted(() => {
      console.log("mounted");
    });
    onErrorCaptured(() => {
      console.log("出错了");
    });
    onRenderTracked((e) => {
      console.log("有数据更新了");
      console.log(e);
    });
    onRenderTriggered((e) => {
      console.log("有数据更新了--------");
      console.log(e);
    });

    return {
      ...refData,
    };
  },
});
</script>
